<!-- 标签页 -->
<template>
    <el-scrollbar width="100vw">
        <template v-for="(item,index) in dynamicTags" :key="item.fullPath">
            <el-dropdown trigger="contextmenu" @contextmenu.native="hiddenDrop" @command="handlerCommand">
                <span class="el-dropdown-link">
                    <el-tag :class="{'actvie':item.fullPath==route.fullPath}"
                        :closable="item.fullPath!=='/index/dashboard'" :disable-transitions="false"
                        @close="remove(index)" @click="skipRoute(index)" type="info">
                        <el-icon v-if="item.fullPath==route.fullPath">
                            <LocationFilled />
                        </el-icon>
                        <span>{{$t(item.meta.title)}}</span>
                    </el-tag>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item :icon="RefreshRight" :command="{code:1,fullPath:item.fullPath}">刷新
                        </el-dropdown-item>
                        <el-dropdown-item :icon="Close" :command="{code:2,fullPath:item.fullPath}"
                            :disabled="index==dynamicTags.length-1||dynamicTags.length==1">关闭右侧标签</el-dropdown-item>
                        <el-dropdown-item :icon="CircleClose" :command="{code:3,fullPath:item.fullPath}"
                            :disabled="dynamicTags.length==1">全部关闭</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </template>
    </el-scrollbar>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import { LocationFilled, CircleClose, Close, RefreshRight } from '@element-plus/icons-vue'
import { type RouteLocationNormalizedLoaded, useRoute, useRouter } from "vue-router";

let router = useRouter()
let route = useRoute()

const dynamicTags = reactive([
    {
        fullPath: "/index/dashboard",
        meta: { title: "home" }
    }
])

// 监听
watch(route, (route) => {
    addTab(route)
})

//新增标签
let addTab = (route: RouteLocationNormalizedLoaded) => {
    if (route.name == "redirect") {
        return;
    }
    let tags = dynamicTags;
    let findTags = tags.find((value) => value.fullPath == route.fullPath);
    // console.log(findTags)
    if (!findTags) {
        let { fullPath, meta: { title } } = route
        tags.push({ fullPath, meta: { title: title as string } })
    }
}
addTab(route)

//删除标签
const remove = (index: number) => {
    let tag = dynamicTags[index]
    if (route.fullPath == tag.fullPath) {
        let { fullPath } = dynamicTags[index + 1] || dynamicTags[index - 1]
        router.push(fullPath)
    }
    dynamicTags.splice(index, 1)
}

//点击切换路由和样式
const skipRoute = (index: any) => {
    let tag = dynamicTags[index]
    if (tag.fullPath != route.fullPath) {
        router.push(tag.fullPath)
    }
}

//拦截下拉菜单弹出
const hiddenDrop = () => {
    document.body.click()
}

//菜单项点击处理事件
const handlerCommand = ({ code, fullPath }: { code: number, fullPath: string }) => {
    // console.log(fullPath)
    let openTags = dynamicTags
    switch (code) {
        case 1: //刷新
            let tag = openTags.find((item) => item.fullPath == fullPath)
            console.log(tag)
            router.push({ path: "/index/redirect/" + tag?.fullPath })
            break;
        case 2: //关闭右侧标签
            let index = openTags.findIndex((item) => item.fullPath == fullPath)  //右击的下标
            let actvieIndex = openTags.findIndex(item => item.fullPath === route.fullPath)  //默认选中的下标
            //删除右侧所有标签
            openTags.splice(index + 1)
            if (actvieIndex > index) {
                router.push(dynamicTags[index].fullPath)
            }
            break;
        case 3:  //关闭所有  
            dynamicTags.splice(1)
            router.push({ name: "Dashboard" })
        default:
            break;
    }
}
</script>
<style scoped lang="less">
    .el-tag {
        margin: 0px 6px;
        background-color: #fff;
        border-radius: 0px;
        min-height: 32px;
        color: #5b5b5e;
        border: 1px solid #b7b9c0;

        .el-tag__content {
            display: flex;
            align-items: center;

            .el-icon {
                margin-right: 5px;
            }
        }
    }
    
    /deep/ .el-tag__close {
        color: rgb(223, 213, 213);
    }
    .actvie {
        background-color: #409EFF;
        color: #fff !important;
        border: 0px;
    }

</style>